{% extends 'base.html' %}
{% load static %}

{% block title%}Add a New Book | {{ block.super}}{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="{% static 'css/main.css' %}">
<link rel="stylesheet" href="{% static 'css/map-style.css' %}">
<link rel="stylesheet" href="{% static 'css/leaflet-search.css' %}">

<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>

<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
crossorigin=""></script>

<!-- Bootstrap Datepicker -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>

<!-- Mapbox -->
<script src='https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.44.1/mapbox-gl.css' rel='stylesheet' />

{% endblock head_extra %}

{% block content %}

<div class="container">
    <br/>
    <div class="row">
        <div class="col-md-4">
            <img class="img-responsive" src="{% static 'images/book.jpg' %}"/>
        </div>
        <div class="col-md-8">
                <h1>{{ book.title }}<small size=".5em" style="color:black">  {{ book.pages }} pages</small></h1>
                <h3>Authors: {% for author in book.authors.all %}<a href="{% url 'authors:author_detail' id=author.id %}">{{ author.full_name }}</a>{% if forloop.last %}{% else %}, {% endif %}{% endfor %}</h3>
                <p>{{ book.synopsis | safe | linebreaks }}</p>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-8">
            <h1>Other Books Nearby</h1>
            {% for b in sorted_nearby %}
                <h4>
                    <a href="{{ b.1.get_absolute_url }}">{{ b.1.1.1 }}</a> <small>{{ b.1.0 | floatformat:2 }} miles away</small>
                </h4>
            {% endfor %}
        </div>
        <div  class="col-md-4">
            <div id="mapid"></div>
        </div>
    </div>

    <br />
    <script>
        var mymap = new L.Map('mapid', {zoom: 9, center: new L.latLng([40,13]) });	//set center from first location
    
        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
            maxZoom: 18,
            id: 'mapbox.streets',
            accessToken: 'pk.eyJ1IjoiYnJpYW5jYWZmZXkiLCJhIjoiY2pkczJycjl5MmhqbTMzbzQ3bHJuaHA3aiJ9.cvRYYPNjQJVpFjdUcmIHzA'
        }).addTo(mymap);

        var bookIcon = L.icon({
            iconUrl: '/static/images/marker-icon.png',
            iconSize:     [35, 35], // size of the icon
            // shadowSize:   [50, 64], // size of the shadow
            iconAnchor:   [17, 35], // point of the icon which will correspond to marker's location
            // shadowAnchor: [4, 62],  // the same for the shadow
            popupAnchor:  [0, -30] // point from which the popup should open relative to the iconAnchor
            });

        var markersLayer = new L.LayerGroup();	//layer contain searched elements
        
        mymap.addLayer(markersLayer);

        function populateMap(data){
            for(i in data) {
                console.log("working")
            var title = data[i].title,	//value searched
                loc = data[i].loc,
                url = data[i].url,		//position found
                marker = new L.Marker(new L.latLng(loc), {title: title, icon: bookIcon} );//se property searched
            marker.bindPopup('<a href="'+ url + '">' + title + '</a>' );
            markersLayer.addLayer(marker);
            }
        }

        var map_books =  JSON.parse('{{ map_book }}');
        var new_lat = map_books[0].loc[0];
        var new_lon = map_books[0].loc[1];
        mymap.setView([new_lat, new_lon], 7);
        populateMap(map_books);

    </script>
</div>

{% endblock %}

